<template>
  <base-modal
    :title="$t('customer.detail.taskCard.multipleCard.buttonGroup.sparePart')"
    :show.sync="remindCustomerDialog"
    class="batch-remind-customer-dialog"
    @closed="remindCustomerDialog = false"
    width="800px"
  >
     <el-table
        :data="list"
        style="width: 100%"
        border
        ref="multipleTable"
      >
        <template v-for="(item, index) in fields">
          <el-table-column
            :prop="item.fieldName"
            :label="item.displayName"
            :key="index"
            resizable
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <template v-if="item.isSystem == 0">
                 <!-- start 备件 -->
                <template v-if="item.fieldName === 'part'">
                  {{ scope.row.attribute[item.fieldName]?scope.row.attribute[item.fieldName][0].name:'' }}
                </template>
                <!-- end 备件 -->
           
              <template v-else>
                {{
                  $formatFormField(column, scope.row)
                }}
              </template>
              </template>
              <template v-else>
               <template v-if="item.fieldName == 'objNo'">
                <span class="view-detail-btn" @click="openTaskTab(scope.row)">{{ scope.row[item.fieldName] }}</span>
              </template>
              <template v-else-if="item.fieldName == 'type'">
                <span>{{ getType(scope.row[item.fieldName]) }}</span>
              </template>
               <template v-else>
                 {{ scope.row[item.fieldName] }}
              </template>
                 
              </template>
            </template>
          </el-table-column>
        </template>
   
      </el-table>
     <div class="dialog-page">
       <el-pagination class="product-table-pagination"
                       background
                       @current-change="jump"
                       @size-change="handleSizeChange"
                       :page-sizes="defaultTableData.defaultPageSizes"
                       :page-size="page.pageSize"
                       :current-page="page.pageNum"
                       layout="prev, pager, next, sizes, jumper,total"
                       :total="page.total">
        </el-pagination>
     </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="remindCustomerDialog = false">{{$t('common.base.close')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import _ from 'lodash';
import {
  getCardInfoRecordList,
} from '@src/api/ProductV2Api';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
import { defaultTableData } from '@src/util/table'

export default {
  name: 'change-dialog',
  data: () => {
    return {
      defaultTableData,
      remindCustomerDialog: false,
      pending: false,
      editedRemind: {},
      list: [],
      fields:[],
      page: {
        pageSize: 10,
        pageNum: 1,
        total:0
      },
    };
  },
  props: {
    product: {
      type: Object,
      default: () => ({}),
    },
  },

  mounted() {
    // this.fetchData();
  },
  methods: {
    getType(type){
      let data = ''
      // eslint-disable-next-line default-case
      switch(type){
      case 0:
        data = this.$t('customer.detail.taskCard.changeDialog.type.replace');
        break;
      case 1:
        data = this.$t('customer.detail.taskCard.changeDialog.type.add');
        break;
      case 2:
        data = this.$t('customer.detail.taskCard.changeDialog.type.delete');
        break;
      }
      return data
    },
    /**
     * @description 打开工单详情tab
     * @param {String} taskId 工单id
     */
    openTaskTab(row) {
      if (!row.objId) return;

      let fromId = window.frameElement.getAttribute('id');

      // this.$platform.openTab({
      //   id: `task_view_${row.objId}`,
      //   title: `工单${row.objNo}`,
      //   close: true,
      //   url: `/task/view/${row.objId}?noHistory=1`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: row.objId,
        titleKey: row.objNo,
        params: `noHistory=1`,
        fromId
      })
    },
    handleSizeChange (pageSize) {
      this.saveDataToStorage('pageSize', pageSize);
      this.page.pageSize = pageSize;
      this.page.pageNum = 1;
      this.search();
    },
    jump (pageNum) {
      this.page.pageNum = pageNum;
      this.search();
    },
    search(){
      getCardInfoRecordList(this.page).then(r=>{
       if(r.code == 0){
         this.list = r.result.list;
         this.page.total = r.result.total
       }else{
         this.$platform.alert(r.message);
       }
      })
    },
    openDialog(product,card) {
      this.fields = [
        ...[
          {
            displayName: this.$t('customer.detail.taskCard.changeDialog.fields.createTime'),
            fieldId: "02dda46e-4e81-11ec-9baf-00163e0d174elucheng01",
            fieldName: "createTime",
            isSystem:1
          },
          {
            displayName: this.$t('customer.detail.taskCard.changeDialog.fields.objNo'),
            fieldId: "02dda46e-4e81-11ec-9baf-00163e0d174elucheng02",
            fieldName: "objNo",
            isSystem:1
          },
          {
            displayName: this.$t('customer.detail.taskCard.changeDialog.fields.type'),
            fieldId: "02dda46e-4e81-11ec-9baf-00163e0d174elucheng03",
            fieldName: "type",
            isSystem:1
          }
        ],
        ...card.fields
      ]
      this.fields = this.fields.filter(item=>{
        return item.formType !== 'attachment'
      })
      this.page.productId = product.id
      this.page.cardId = card.id
      this.search();
      this.remindCustomerDialog = true;
    },
    // getList() {
    //   getCardFieldAll().then(r=>{
    //     console.log(r)
    //     this.page.pageNum = 1
    //     this.page.pageSize = 10
    //     this.search()
    //   })
    // },
  },
};
</script>

<style  lang="scss" scoped>
  .dialog-page{
    text-align: right;
    width: 100%;
    padding-top: 10px;
  }
</style>
